<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>我要休假</title>
<link rel="stylesheet" href="assets/plugins/mobiscroll/css/mobiscroll.custom-2.16.1.min.css">
<script type="text/javascript" src="assets/plugins/mobiscroll/js/mobiscroll.custom-2.16.1.min.js"></script>
<script type="text/javascript">
	var $datepicker = $(".app-scroll-picker input");
	$datepicker.mobiscroll().date({
    	display:"inline",
    	startYear:new Date().getFullYear(),
    	dateFormat:"yy-mm-dd",
    	dateOrder:"yymmdd",
    	yearSuffix:"年",
    	monthSuffix:"月",
    	daySuffix:"日",
    	minDate: new Date()
    });
    
    $(".datepicker").on("focus",function(){
    	$datepicker.mobiscroll("setVal",new Date());
    	$(".app-scroll-picker").removeClass("am-hide");
    	var target = $(this).attr("name");
    	$(".app-scroll-picker .dp-btn").data("target-name",target);
    });
    
    $(".app-scroll-picker .dp-btn").on("click",function(){
    	var val = $datepicker.val();
    	var target = $(this).data("target-name");
    	$(".datepicker:input[name='"+target+"']").val(val);
    	$(".app-scroll-picker").addClass("am-hide");
    });
    
    $("#submit-btn").on("click",function(){
    	var begintime = $("#begintime").val();
        if (!begintime) {
        	Comm.msg("请选择起始日期");
            return;
        }
		var endtime = $("#endtime").val();
        if (!endtime) {
        	Comm.msg("请选择结束日期");
            return;
        }
		var $btn = $(this);
		$btn.attr("disabled","disabled").text("正在提交...");
		//$("form").submit();
		
		$.ajax({
			type : 'POST',
            url: "${ctx}/weixin/employee/vacate",
            dataType: "json",
            data:$('form').serialize(),
            success: function (data) {
            	$btn.prop("disabled",false).text("提交");
            	Comm.msg(data.msg);
                if (data.success) {
                	//window.location.href="${ctx}/weixin/employee/vacate";
                }
            },
            error: function () {
            	Comm.msg("提交失败，请重试");
            	$btn.prop("disabled",false).text("提交");
            }
        });
	});
</script>
</head>

<body>
	<h2 class="app-title">请选择休假时间</h2>
	<div class="am-g">
		<div class="am-u-sm-12 am-text-xs am-text-grey am-padding-left">
			提示：休假时间内不接受顾客预约
		</div>
		<div class="am-u-sm-12 am-margin-top am-padding-left-0">
			<form class="am-form am-form-horizontal">
				<div class="am-form-group">
					<label class="am-u-sm-3 am-form-label am-text-sm am-padding-left-0">我要在</label>
					<div class="am-u-sm-9"><input id="begintime" name="begintime" type="text" class="datepicker" readonly></div>
				</div>
				<div class="am-form-group">
					<label class="am-u-sm-3 am-form-label am-text-sm">到</label>
					<div class="am-u-sm-9"><input id="endtime" name="endtime" type="text" class="datepicker" readonly></div>
				</div>
				<div class="am-form-group">
					<label class="am-u-sm-12 am-text-sm am-padding-left-sm">这段时间内休假</label>
				</div>
				<div class="am-form-group">
					<label class="am-u-sm-3 am-form-label am-text-sm am-padding-left-0">休假理由</label>
					<div class="am-u-sm-9 am-padding-top-xs">
						<label class="am-radio-inline" style="width: 52px;"><input type="radio" name="reason" value="a" data-am-ucheck checked="checked"> 事假</label>
						<label class="am-radio-inline" style="width: 52px;"><input type="radio" name="reason" value="b" data-am-ucheck> 病假</label>
						<label class="am-radio-inline" style="width: 80px;"><input type="radio" name="reason" value="c" data-am-ucheck> 公务外出</label>
					</div>
				</div>
				<div class="am-form-group">
					<div class="am-u-sm-12 am-text-center">
						<button id="submit-btn" class="am-btn am-btn-landiao am-radius am-padding-horizontal-lg" type="button">提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="app-scroll-picker am-hide">
		<div class="am-text-right">
			<a href="javascript:void(0)" class="am-text-black am-padding-sm dp-btn">完成</a>
		</div>
		<div class="am-text-center">
			<input type="hidden" />
		</div>
	</div>
</body>
</html>
